<template>
  <el-dialog :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="900"
    :close-on-click-modal="false" draggable>
    <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
      <el-row :gutter="5">
        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="仓库代码" prop="locationTypeName">
            <el-input clearable disabled v-model="dataForm.warehouseCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="仓库名称" prop="warehouseName">
            <el-input clearable disabled placeholder="" v-model="dataForm.warehouseName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5" v-if="dataForm.warehouseCode === 'RM'">
        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="区域代码" prop="areaCode">
            <el-input clearable placeholder="请输入区域代码" v-model="dataForm.areaCode" @change="setRMlocationCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="排" prop="rowCode">
            <el-input controls-position="right" v-model="dataForm.rowCode" @change="setRMlocationCode" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="层" prop="layerCode">
            <el-input controls-position="right" v-model="dataForm.layerCode" @change="setRMlocationCode"
              type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="列" prop="columnCode">
            <el-input controls-position="right" v-model="dataForm.columnCode" @change="setRMlocationCode"
              type="number" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="库位代码" prop="locationCode">
            <el-input clearable placeholder="请输入库位代码" v-model="dataForm.locationCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="库位名称" prop="locationName">
            <el-input clearable placeholder="请输入库位名称" v-model="dataForm.locationName" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="是否启用库位" prop="forbiddenStatus">
            <el-radio-group v-model="dataForm.forbiddenStatus">
              <el-radio :key="index" :value="item.value" border v-for="(item, index) in YN">{{
                item.label === 'Y' ? '是' : '否'
              }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="是否启用容量" prop="capacityIsForbidden">
            <el-radio-group v-model="dataForm.capacityIsForbidden">
              <el-radio :key="index" :value="item.value" border v-for="(item, index) in YN">{{
                item.label === 'Y' ? '是' : '否'
              }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="库位类型代码" prop="locationTypeCode">
            <!--<el-input clearable placeholder="请输入库位类型代码" v-model="dataForm.locationTypeCode"/>-->
            <el-select v-model="dataForm.locationTypeCode" placeholder="请输入库位类型代码" @change="locationTypeCodeChange">
              <el-option v-for="item in WarehouseLocationType" :key="item.value" :value="item.value">
                <span style="float: left">{{ item.text }}</span>
                <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                  {{ item.value }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="库位类型名称" prop="locationTypeName">
            <el-input disabled clearable placeholder="请输入库位类型名称" v-model="dataForm.locationTypeName" />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="产线" prop="productionLine">
            <el-input clearable placeholder="请输入产线" v-model="dataForm.productionLine"/>
          </el-form-item>
        </el-col> -->

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="最大容量" prop="maxCapacity">
            <el-input-number controls-position="right" v-model="dataForm.maxCapacity" :min="0" :max="9999"
              :precision="0" :step="1" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label-width="120px" label="最小容量" prop="minCapacity">
            <el-input-number controls-position="right" v-model="dataForm.minCapacity" :min="0" :max="9999"
              :precision="0" :step="1" />
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
        <el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { useDict } from "/@/hooks/dict";
// 2.定义需要表单的变量
import { useI18n } from "vue-i18n";
import { useMessage } from "/@/hooks/message";
import { addLocation, updateLocation } from "/@/api/platform/wms/warehouse";
import { useBizDict } from "/@/hooks/bizDict";

// 1.定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);

// 获取数据字典
// @ts-ignore
const { YN } = useDict('YN');
const { WarehouseLocationType } = useBizDict("WarehouseLocationType");

const dataForm = reactive({
  id: '',
  warehouseId: null,
  warehouseCode: '',
  warehouseName: '',
  rowCode: '',
  columnCode: '',
  layerCode: '',
  areaCode: '',
  locationCode: '',
  locationName: '',
  forbiddenStatus: 'Y',
  locationTypeCode: '',
  locationTypeName: '',
  maxCapacity: 1,
  minCapacity: 1,
  productionLine: '',
  capacityIsForbidden:'N'
});
const { t } = useI18n();

// 定义方法
const openDialog = async (childRow: any, parentRow: any) => {
  dataForm.id = undefined
  // 重置表单数据
  await nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  // 判断是新增还是编辑的方法
  if (childRow?.id) {
    // 编辑操作
    Object.assign(dataForm, childRow);
  } else {
    // 新增操作 如果三个个属性为空，则提示错误
    if (!parentRow?.warehouseCode || !parentRow?.warehouseName || !parentRow?.id) {
      // 提示错误
      return useMessage().error("请选择仓库");
    }
    // 将parentRow中的warehouseTypeCode、warehouseTypeName、id分别赋值给warehouseCode、warehouseName、warehouseId
    dataForm.warehouseCode = parentRow?.warehouseCode;
    dataForm.warehouseName = parentRow?.warehouseName;
    dataForm.warehouseId = parentRow?.id;
  }
  // 显示弹框
  visible.value = true;
}
// 定义表单验证规则
const dataRules = reactive({})

// 通知父组件刷新
const emit = defineEmits(['refresh']);

// 表单提交的方法
const onSubmit = async () => {
  // 1.表单验证
  const valid = await dataFormRef.value.validate()
  if (!valid) return false;
  // 2.新增或者编辑表单
  try {
    loading.value = true;
    dataForm.rowCode = dataForm.rowCode.padStart(2, "0");
    dataForm.layerCode = dataForm.layerCode.padStart(2, "0");
    dataForm.columnCode = dataForm.columnCode.padStart(2, "0");
    const result = dataForm.id ? await updateLocation(dataForm) : await addLocation(dataForm);

    useMessage().success(t(dataForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
    emit('refresh', result.data);
    // 关闭弹框
    visible.value = false;
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
}
// locationTypeCodeChange改变
const locationTypeCodeChange = (value: string) => {
  dataForm.locationTypeName = WarehouseLocationType.value.find((item: any) => item.value === value)?.text
}
const setRMlocationCode = (value: string) => {
  if (dataForm.warehouseCode != "RM")
    return;
  if (dataForm.areaCode != "" && dataForm.rowCode != "" && dataForm.layerCode != "" && dataForm.columnCode != "") {
    dataForm.locationCode = dataForm.areaCode + dataForm.rowCode.padStart(2, "0") + dataForm.layerCode.padStart(2, "0") + dataForm.columnCode.padStart(2, "0");
  }
}
// 暴露方法
defineExpose({
  openDialog
})

</script>

<style scoped lang="scss"></style>